
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js"></script>
        <script src="jquery.js"></script>

        <script>
            require("avalon.draggable", function() {

                function enter(dropper, point1, point2, point3, point4) {
                    var left = dropper.left + dropper.height * 0.1 / 2
                    var top = dropper.top + dropper.height * 0.1 / 2
                    var right = dropper.left + dropper.width - dropper.height * 0.1 / 2
                    var bottom = dropper.top + dropper.height - dropper.height * 0.1 / 2
                    if (point1[0] > left && point1[0] < right && point1[1] > top && point1[1] < bottom) {
                        return dropper
                    }
                    if (point2 && point2[0] > left && point2[0] < right && point2[1] > top && point2[1] < bottom) {
                        return dropper
                    }
                    if (point3 && point3[0] > left && point3[0] < right && point3[1] > top && point3[1] < bottom) {
                        return dropper
                    }
                    if (point4 && point4[0] > left && point4[0] < right && point4[1] > top && point4[1] < bottom) {
                        return dropper
                    }
                }
                function enter2(drop, point) {
                    var topArea = {
                        top: drop.top,
                        left: drop.left,
                        width: 320,
                        height: 160
                    }
                    var bottomArea = {
                        top: drop.top + 320 / 2,
                        left: drop.left,
                        width: 320,
                        height: 160
                    }
                    if (enter(topArea, point)) {
                        return "top"
                    }
                    if (enter(bottomArea, point)) {
                        return "bottom"
                    }
                }
                function resetOldValue(object) {
                    object.left = object.new_left
                    object.top = object.new_top
                    object.row = object.new_row
                    object.col = object.new_col
                    object.sleft = object.new_sleft
                    object.new_left = ""
                    object.new_top = ""
                    object.new_row = ""
                    object.new_col = ""
                    object.new_sleft = ""
                }

                function createWrapper(movable, elem) {
                    var wrapper = $("<div/>").css({
                        top: movable.new_top,
                        left: movable.new_left,
                        width: movable.width,
                        height: movable.height,
                        overflow: "hidden",
                        position: "absolute",
                        "z-index": 2
                    }).insertBefore(elem).append(elem)
                    wrapper.find("app").css({
                        top: 0,
                        left: 0
                    })
                    //这个容器将插入到旧位置
                    var cloneWrapper = wrapper.clone(true).insertAfter(wrapper).css({
                        top: movable.top,
                        left: movable.left
                    })
                    return [wrapper, cloneWrapper]
                }

                function swapElements(array, dragIndex, dropIndex) {
                    var arr = array._splice(dragIndex, 1)
                    array._splice(dropIndex, 0, arr[0])
                }


                function swapProperties3(array, model) {
                    model.onLayout("new_", array)
                }

                var model = avalon.define("apps", function(vm) {
                    vm.getColor = function() {
                        var letters = 'A523456789ABCDEF'.split('');
                        var color = '#';
                        for (var i = 0; i < 6; i++) {
                            color += letters[Math.round(Math.random() * 15)];
                        }
                        return color;
                    }
                    vm.maxRow = 2
                    vm.dragsmalldropmiddledown = false
                    vm.$skipArray = ["maxRow", "vapps", "animate", "dragsmalldropmiddledown"]
                    vm.vapps = []
                    vm.animate = false
                    //#############################
                    vm.onLayout = function(prefix, array) {
                        var children = this.children
                        var maxRow = model.maxRow //每一列最多 多少行，用于配置
                        var row = 0 //当前APP所在的栏数
                        var col = 0 //当前APP所在的栏数
                        var sleft = 1
                        prefix = prefix == "new_" ? prefix : ""
                        array = array || model.apps
                        for (var i = 0, el; el = array[i]; i++) {
                            if (el.size == "small") {
                                if (sleft) {//如果是左边
                                    sleft = 0
                                    el[prefix + "top"] = row * 170//(small.height + 20)
                                    el[prefix + "left"] = col * 340//(big.width + 20)
                                    el[prefix + "row"] = row
                                    el[prefix + "col"] = col
                                    el[prefix + "sleft"] = 1
                                    //判定右边是不是small
                                    if (model.apps[i + 1] && model.apps[i + 1].size !== "small") {
                                        model.vapps.push({
                                            top: row * 170,
                                            left: col * 340 + 170,
                                            type: "small",
                                            width: 150,
                                            height: 150,
                                            el: el
                                        })
                                    }
                                } else {
                                    sleft = 1
                                    el[prefix + "top"] = row * 170//(small.height + 20)
                                    el[prefix + "left"] = col * 340 + 170//(big.width + 20)
                                    el[prefix + "row"] = row
                                    el[prefix + "col"] = col
                                    el[prefix + "sleft"] = 0
                                    row++
                                    if (row === maxRow && model.apps[i + 1] && model.apps[i + 1].size === "big") {
                                        model.vapps.push({
                                            width: 320,
                                            height: 150,
                                            type: "middle",
                                            top: row * 170,
                                            left: col * 340,
                                            el: el
                                        })
                                        row = 0
                                        col++
                                    }
                                }
                                if (children) {
                                    el.width = 150
                                    el.height = 150
                                }
                                if (row > maxRow) {
                                    row = 0
                                    col++
                                }
                            } else if (el.size == "middle") {
                                if (!sleft) {//如果前面是一个小型的，后面是一个中型的，那么换行
                                    row++
                                    if (row > maxRow) {//如果原来就是最后一行，那么换另一列
                                        row = 0
                                        col++
                                    }
                                }
                                sleft = 1
                                el[prefix + "top"] = row * 170//(small.height + 20)
                                el[prefix + "left"] = col * 340//(big.width + 20)
                                el[prefix + "row"] = row
                                el[prefix + "col"] = col
                                el[prefix + "sleft"] = 1
                                if (children) {
                                    el.width = 320
                                    el.height = 150
                                }
                                row++

                                if (row === maxRow && model.apps[i + 1] && model.apps[i + 1].size === "big") {
                                    console.log(row + "________________________" + el.size)
                                    model.vapps.push({
                                        width: 320,
                                        height: 150,
                                        type: "middle",
                                        top: row * 170,
                                        left: col * 340,
                                        el: el
                                    })
                                    row = 0
                                    col++
                                }
                                if (row > maxRow) {
                                    row = 0
                                    col++
                                }
                            } else if (el.size == "big") {
                                if (!sleft) {//如果前面是一个小型的，后面是一个大型的，那么换行
                                    row++
                                    if (row > maxRow) {//如果原来就是最后一行，那么换另一列
                                        row = 0
                                        col++
                                    }
                                }
                                el[prefix + "top"] = row * 170//(small.height + 20)
                                el[prefix + "left"] = col * 340//(big.width + 20)
                                el[prefix + "row"] = row
                                el[prefix + "col"] = col
                                el[prefix + "sleft"] = 1
                                if (children) {
                                    el.width = 320
                                    el.height = 320
                                }
                                row += 2
                                sleft = 1
                                if (row === maxRow && model.apps[i + 1] && model.apps[i + 1].size == "big") {
                                    model.vapps.push({
                                        el: el,
                                        top: maxRow * 170,
                                        left: col * 340, //170 = small.width + border-width
                                        type: "middle",
                                        width: 320,
                                        height: 150
                                    })//位于XXX之后
                                    row = 0
                                    col++
                                }
                                if (row > maxRow) {
                                    row = 0
                                    col++
                                }
                            }
                            //  }
                            if (children) {
                                el.element = children[i]
                            }
                            el.animate = false
                        }
                        var lastEl = model.apps[ model.apps.length - 1], flagLast = true
                        while (row <= maxRow) {
                            if (flagLast && lastEl.size === "small") {
                                model.vapps.push({
                                    el: lastEl,
                                    top: row * 170,
                                    left: col * 340 + 170, //170 = small.width + border-width
                                    type: "small",
                                    width: 150,
                                    height: 150
                                })//位于XXX之后
                                flagLast = false
                                row++
                            } else {
                                model.vapps.push({
                                    el: lastEl,
                                    top: row * 170,
                                    left: col * 340, //170 = small.width + border-width
                                    width: 320,
                                    type: "middle",
                                    height: 150
                                })//位于XXX之后
                                flagLast = false
                                row++
                            }

                        }
                        console.log(model.vapps)
                    }
                    function fix(array) {
                        for (var i = 0, el; el = array[i++]; ) {
                            el.top = 0
                            el.left = 0
                            el.row = 0
                            el.col = 0
                            el.sleft = 1
                            el.width = 0
                            el.height = 0
                            el.new_top = ""
                            el.new_left = ""
                            el.new_row = ""
                            el.new_col = ""
                            el.new_sleft = ""
                            el.element = {}
                            el.$skipArray = ["width", "height", "sleft", "animate", "element", "row", "col", "new_top", "new_left", "new_col", "new_row", "new_sleft"]
                        }
                        return array
                    }
                    vm.apps = fix([
                        {
                            name: "0",
                            size: "small"
                        },
                        {
                            name: "1",
                            size: "small"
                        },
                        {
                            name: "2",
                            size: "middle"
                        },
                        {
                            name: "3",
                            size: "middle"
                        },
                        {
                            name: "4",
                            size: "middle"
                        },
                        {
                            name: "5",
                            size: "big"
                        },
                        {
                            name: "6",
                            size: "big"
                        },
                        {
                            name: "7",
                            size: "big"
                        }
                    ])

                    vm.handle = function(e) {
                        var el = e.target
                        if (/apphead/.test(el.className)) {
                            return el
                        }
                    }
                    vm.dragClass = ""
                    vm.start = function() {
                        avalon(this).addClass("current")
                        this.style.zIndex = 100
                        model.dragClass = "dragging"
                    }
                    vm.beforeStop = function() {
                        vm.dragClass = ""
                    }
                    vm.stop = function() {
                        var drag = this["data-vm"]
                        drag.animate = false
                        if (model.animate === true) {
                            model.animate = false
                            var elem = this
                            var id = setInterval(function() {
                                clearInterval(id)
                                model.stop.call(elem)
                            }, 100)
                            return
                        }
                        if (typeof drag.new_top === "string" || typeof drag.new_left === "string" || (drag.top === drag.new_top && drag.left === drag.new_left)) {
                            this.style.top = drag.top + "px"
                            this.style.left = drag.left + "px"
                            avalon(this).removeClass("current")
                            this.style.zIndex = 0
                        } else {
                            $(this).animate({left: drag.new_left, top: drag.new_top}, 300, function() {
                                this.style.left = drag.new_left + "px"
                                this.style.top = drag.new_top + "px"
                                avalon(this).removeClass("current")
                                this.style.zIndex = 0
                                resetOldValue(drag)
                                model.animate = false

                            })
                        }
                    }

                    vm.drag = function(event, data) {
                        if (model.animate)
                            return
                        var drag = this["data-vm"]
                        switch (drag.size) {
                            case "small":
                                var point1 = [data.left + drag.width * 0.5, data.top + drag.height * 0.5]
                                break;
                            case "middle":
                                var point1 = [data.left + drag.width * 0.25, data.top + drag.height * 0.5]
                                var point2 = [data.left + drag.width * 0.75, data.top + drag.height * 0.5]
                                break;
                            case "big":
                                var point1 = [data.left + drag.width * 0.25, data.top + drag.height * 0.25]
                                var point2 = [data.left + drag.width * 0.75, data.top + drag.height * 0.25]
                                var point3 = [data.left + drag.width * 0.25, data.top + drag.height * 0.75]
                                var point4 = [data.left + drag.width * 0.75, data.top + drag.height * 0.75]
                                break;
                        }

                        drag.animate = true

                        var drop = false
                        for (var i = 0, el; el = model.apps[i]; i++) {//检测拖动块与真实APP的碰撞
                            if (!el.animate && enter(el, point1, point2, point3, point4)) {
                                drop = el
                                break
                            }
                        }
                        if (!drop && model.vapps.length) {//如果不与真实APP发生碰撞，那么将检测它与所有空格的碰撞
                            var insertion = false
                            for (var i = 0, el; el = model.vapps[i]; i++) {
                                if (enter(el, point1, point2, point3, point4)) {
                                    insertion = el
                                    break
                                }
                            }
                            if (insertion) {
                                var insertIndex = model.apps.indexOf(insertion.el)
                                var dragIndex = model.apps.indexOf(drag)
                                swapElements(model.apps, dragIndex, insertIndex + 1)
                                model.animate = true
                                swapArray = model.apps.slice(0)
                                swapProperties3(swapArray, model)
                            } else {
                                return
                            }
                        }
                        if (drop) {
                            //求出是左移右移上移下移
                            if (drop.animate) {
                                return
                            }
                            var dragIndex = model.apps.indexOf(drag)
                            var dropIndex = model.apps.indexOf(drop)
                            var swapArray = []
                            if (model.dragsmalldropmiddledown && model.dragsmalldropmiddledown !== drop) {
                                model.dragsmalldropmiddledown = false
                                swapElements(model.apps, dragIndex, dropIndex - 1)

                                model.animate = true
                            } else if (drag.size === drop.size) {// small === small middle === middle big === big✓
                                swapElements(model.apps, dragIndex, dropIndex)//交换元素的位置
                                model.animate = true
                            } else if (drag.size === "small" && drop.size == "middle") {
                                if (drag.col === drop.col) {//如果是在同一列
                                    if (drag.row > drop.row) {//如果是往上
                                        swapElements(model.apps, dragIndex, dropIndex)
                                        model.animate = true
                                    } else {
                                        model.dragsmalldropmiddledown = drop
                                        if (drag.sleft === 1) {
                                            var maybe = model.apps[dropIndex + 1]
                                            if (maybe == drop) {//如果它位于左边，紧接着就是中型的
                                                return
                                            } else {//否则做水平交换动画
                                                swapElements(model.apps, dragIndex, dropIndex - 1)
                                                animate = true
                                            }
                                        } else {
                                            return
                                        }
                                    }
                                } else {//如果是在不同列
                                    if (drag.col > drop.col) {
                                        swapElements(model.apps, dragIndex, dropIndex)//插入前面
                                    } else {
                                        swapElements(model.apps, dragIndex, dropIndex - 1)//插入前面
                                    }
                                    model.animate = true
                                }
                            } else if (drag.size === "small" && drop.size == "big") {
                                if (drag.col === drop.col) {//如果是在同一列
                                    var dropPosition = enter2(drop, point1)
                                    if (drag.row > drop.row) {//如果是往上
                                        if (dropPosition === "bottom") {
                                            return
                                        }
                                        if (dropPosition === "top") {
                                            swapElements(model.apps, dragIndex, dropIndex)
                                            model.animate = true
                                        }
                                    } else {
                                        if (dropPosition === "top") {
                                            return
                                        }
                                        if (dropPosition === "bottom") {
                                            swapElements(model.apps, dragIndex, dropIndex)
                                            model.animate = true
                                        }
                                    }
                                } else {
                                    if (drag.col > drop.col) {//往左
                                        swapElements(model.apps, dragIndex, dropIndex)//插入前面
                                    } else {
                                        swapElements(model.apps, dragIndex, dropIndex - 1)//插入后面
                                    }
                                    model.animate = true
                                }
                            } else if (drag.size === "middle" && drop.size == "small") {//✓
                                if (drag.col === drop.col) {//如果是在同一列
                                    if (drag.row > drop.row) {//如果是往上
                                        swapElements(model.apps, dragIndex, dropIndex)
                                    } else {//如果由下往上拖动✓
                                        var maybeDropIndex = dropIndex
                                        var maybe = model.apps[dropIndex + 1]
                                        if (maybe && maybe.row == drop.row) {
                                            maybeDropIndex = dropIndex + 1
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行后面
                                    }
                                } else {
                                    var maybeDropIndex = dropIndex
                                    if (drag.col > drop.col) {//往左
                                        var maybe = model.apps[dropIndex - 1]
                                        if (maybe && maybe.row == drop.row) {
                                            maybeDropIndex = dropIndex - 1
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行前面
                                    } else {
                                        var maybe = model.apps[dropIndex + 1]
                                        if (maybe && maybe.row == drop.row) {
                                            maybeDropIndex = dropIndex + 1
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行后面
                                    }
                                }
                                model.animate = true
                            } else if ((drag.size === "middle" && drop.size === "big")) {//✓
                                if (drag.col === drop.col) {//如果是在同一列
                                    if (drag.row > drop.row) {//如果是往上
                                        swapElements(model.apps, dragIndex, dropIndex)//插入前面
                                    } else {//往下
                                        swapElements(model.apps, dragIndex, dropIndex - 1)//插入后面
                                    }
                                } else {
                                    if (drag.col > drop.col) {//往左
                                        swapElements(model.apps, dragIndex, dropIndex)//插入前面
                                    } else {
                                        swapElements(model.apps, dragIndex, dropIndex - 1)//插入后面
                                    }
                                }
                                model.animate = true
                            } else if (drag.size == "big" && drop.size === "middle") {//✓
                                if (drag.col === drop.col) {//如果是在同一列
                                    if (drag.row > drop.row) {//如果是往上
                                        swapElements(model.apps, dragIndex, dropIndex)//插入前面
                                    } else {
                                        swapElements(model.apps, dragIndex, dropIndex)//插入后面
                                    }
                                } else {
                                    if (drag.col > drop.col) {//如果是往左
                                        swapElements(model.apps, dragIndex, dropIndex)//插入前面
                                    } else {
                                        var maybeDropIndex = dropIndex
                                        var maybe = model.apps[dropIndex + 1]
                                        if (maybe && maybe.size !== "big" && maybe.row == drop.row + 1) {
                                            maybeDropIndex = dropIndex + 1
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这两行后面
                                    }
                                }
                                model.animate = true
                            } else if (drag.size == "big" && drop.size === "small") {//✓
                                if (drag.col === drop.col) {//如果是在同一列
                                    if (drag.row > drop.row) {//如果是往上
                                        swapElements(model.apps, dragIndex, dropIndex)//插入这一行前面
                                    } else {
                                        var maybeDropIndex = dropIndex
                                        var maybe = model.apps[dropIndex + 1]
                                        if (maybe && maybe.row == drop.row) {
                                            maybeDropIndex = dropIndex + 1
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这一行后面
                                    }
                                } else {
                                    var maybeDropIndex = dropIndex
                                    if (drag.col > drop.col) {//如果是往左
                                        var maybe = model.apps[dropIndex - 1]
                                        if (maybe && maybe.row == drop.row) {
                                            maybeDropIndex = dropIndex - 1
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这两行前面
                                    } else {
                                        var maybeDropIndex = dropIndex
                                        var maybe = model.apps[dropIndex + 1]
                                        if (maybe && maybe.row == drop.row) {
                                            maybeDropIndex = dropIndex + 1
                                            maybe = model.apps[dropIndex + 2]
                                            if (maybe && maybe.size !== "big" && maybe.row == drop.row + 1) {
                                                maybeDropIndex++
                                                maybe = model.apps[dropIndex + 3]
                                                if (maybe && maybe.size !== "big" && maybe.row == drop.row + 1) {
                                                    maybeDropIndex++
                                                }
                                            }
                                        }
                                        swapElements(model.apps, dragIndex, maybeDropIndex)//插入这两行后面
                                    }
                                }
                                model.animate = true
                            }
                        }

                        if (model.animate) {
                            swapArray = model.apps.slice(0)
                            swapProperties3(swapArray, model)
                            var swapLength = swapArray.length
                            var animateIndex = 0
                            function lastCallback(obj) {
                                resetOldValue(obj)
                                obj.animate = false
                                animateIndex++
                                if (animateIndex == swapLength) {
                                    model.animate = false
                                }
                            }

                            for (var i = 0; i < swapLength; i++) {
                                if (swapArray[i] !== drag) {
                                    (function(movable, elem) {
                                        movable.animate = true;
                                        //没有发生交换
                                        if (typeof movable.new_top === "string") {
                                            movable.animate = false
                                            lastCallback({})
                                            return
                                        }
                                        //没有发生交换
                                        if (movable.left === movable.new_left && movable.top === movable.new_top) {
                                            lastCallback(movable)
                                            return
                                        }
                                        //不同列的上下移动 A
                                        if (movable.sleft == movable.new_sleft && movable.new_col !== movable.col && movable.new_row == 0) {
                                            var wrappers = createWrapper(movable, elem)
                                            var wrapper = wrappers[0]
                                            var cloneWrapper = wrappers[1]
                                            cloneWrapper.find("app").animate({top: movable.height}, 490, function() {
                                                cloneWrapper.remove()
                                            })
                                            wrapper.height(0).animate({height: movable.height}, 500, function() {
                                                $(elem).replaceAll(wrapper).css({
                                                    top: movable.new_top,
                                                    left: movable.new_left
                                                })
                                                lastCallback(movable)
                                            })
                                            return
                                        }
                                        //不同列的上下移动 B
                                        if (movable.sleft == movable.new_sleft && movable.new_col !== movable.col && movable.top == 0) {
                                            var wrappers = createWrapper(movable, elem)
                                            var wrapper = wrappers[0]
                                            var cloneWrapper = wrappers[1]
                                            cloneWrapper.animate({height: 0}, 490, function() {
                                                cloneWrapper.remove()
                                            })
                                            $(elem).css({
                                                top: movable.height
                                            }).animate({top: 0}, 500, function() {
                                                $(elem).replaceAll(wrapper).css({
                                                    top: movable.new_top,
                                                    left: movable.new_left
                                                })
                                                lastCallback(movable)
                                            })
                                            return
                                        }
                                        //当前行的水平移动
                                        if (movable.col == movable.new_col && movable.row == movable.new_row && movable.sleft != movable.new_sleft) {
                                            $(elem).animate({left: movable.new_left}, 500, function() {
                                                elem.style.left = movable.new_left + "px"
                                                elem.style.top = movable.new_top + "px"
                                                lastCallback(movable)
                                            })
                                            return
                                        }
                                        //当前列的上下移动
                                        if (movable.col == movable.new_col && movable.row !== movable.new_row && movable.sleft == movable.new_sleft) {
                                            $(elem).animate({top: movable.new_top}, 500, function() {
                                                elem.style.left = movable.new_left + "px"
                                                elem.style.top = movable.new_top + "px"
                                                lastCallback(movable)
                                            })
                                            return
                                        }
                                        //不同行的上下移动
                                        if (movable.row !== movable.new_row) {
                                            var wrappers = createWrapper(movable, elem)
                                            var wrapper = wrappers[0]
                                            var cloneWrapper = wrappers[1]

                                            if (movable.col * 100 + movable.row * 10 > movable.new_col * 100 + movable.new_row * 10) {//insrtAfter
                                                //旧位置的，container width慢慢变小
                                                cloneWrapper.animate({width: 0}, 490, function() {
                                                    cloneWrapper.remove()
                                                })
                                                //新位置的，app left慢慢变小
                                                $(elem).css({left: movable.width}).animate({left: 0}, 500, function() {
                                                    $(elem).replaceAll(wrapper).css({
                                                        top: movable.new_top,
                                                        left: movable.new_left
                                                    })
                                                    lastCallback(movable)
                                                });
                                            } else {
                                                //旧位置的，app left慢慢变大
                                                cloneWrapper.find("app").animate({left: movable.width}, 490, function() {
                                                    cloneWrapper.remove()
                                                })
                                                //新位置的，container width慢慢变大
                                                wrapper.width(0).animate({width: movable.width}, 500, function() {
                                                    $(elem).replaceAll(wrapper).css({
                                                        top: movable.new_top,
                                                        left: movable.new_left
                                                    })
                                                    lastCallback(movable)
                                                });
                                            }
                                            return
                                        }


                                    })(swapArray[i], swapArray[i].element);
                                } else {
                                    lastCallback({})
                                }
                            }
                        }
                    }

                })
                avalon.scan()
            })

        </script>
        <style>
            .apps{
                position: relative;
                border:10px solid #01B4D2;
                height:570px;

            }
            .apps.dragging app:not(.current){
                -webkit-transform:scale(.9);
                -moz-transform:scale(.9);
                transform:scale(.9);
            }
            app{
                display: inline-block;
                position: absolute;
                text-align: center;
                line-height: 1;
                -webkit-transform: translate3d(0, 0, 0);
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                -webkit-transition:-webkit-transform .3s ease-in-out;
                -moz-transition:-moz-transform .3s ease-in-out;
                transition:transform .3s ease-in-out;

                z-index:1;
            }
            app:hover {
                box-shadow:0px 0px 1px 5px #b1e8f3;
            }
            .apphead {
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: right;
                padding-right: 20px;
                box-sizing: border-box;
                -moz-box-sizing: border-box;

                color: #000;
                font-size: 14px;
                cursor: move;
            }
            app.current{
                z-index:100;
                opacity: 0.5;
                transform:scale(1.1);
            }
            app.app_small{
                width:150px;
                height:150px;
            }
            app.app_big{
                width:320px;
                height:320px;
            }
            app.app_middle{
                width:320px;
                height:150px;
            }

        </style>
    </head>
    <body>
        <div class="apps" ms-controller="apps" id="metro" ms-class="{{dragClass}}"ms-each="apps" data-each-rendered="onLayout">
            <app ms-draggable="apps" data-drag-start="start" 
                 data-drag-drag="drag" data-drag-stop="stop" 
                 data-drag-before-stop="beforeStop" 
                 data-drag-handle="handle"
                 ms-class="app_{{el.size}}" 
                 ms-data-vm="el" 
                 ms-css-background="getColor()" 
                 ms-css-top="top"
                 ms-css-left="left">
                <div class="apphead">{{el.name }}</div></app>
        </div> 
    </body>
</html>
